import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import SvgIcon from './svg'
import Charts from './Charts';
import Charts2 from './Charts2';
import Helper from '../../../components/Helper';
import cn from 'classnames';
import s from './style.module.css';
import fetchFer from 'API/fetch';

export default function Stats({ activeNum }) {
	const [info, setInfo] = useState({});
	const getSummary = async () => {
		const res = await fetchFer(`/api/v2/tasks/ipv6/summary`, {
			method: 'GET',
		}).catch(error => {
			return error;
		});
		setInfo(res.results);
	};
	useEffect(() => {
		getSummary();
	}, [activeNum]);
	return (
		<div className={cn(s.df, s.aic, s.statusBox)}>
			<div className={s.item}>
				<div className={s.countsr}>{info?.tasks_total_count || 0}</div>
				<div className={s.label}>
					<SvgIcon active={1}></SvgIcon>
					<span className={s.textCor}>任务数</span>
				</div>
			</div>
			<div className={s.item}>
				<div className={s.countsr}>{info?.task_running_count || 0}</div>
				<div className={s.label}>
					<SvgIcon active={2}></SvgIcon>
					<span className={s.textCor}>正在检测任务数</span>
				</div>
			</div>
			<div className={s.item}>
				<div className={s.countsr}>{info?.tasks_ipv6_supported_count || 0}</div>
				<div className={s.label}>
					<SvgIcon active={3}></SvgIcon>
					<span className={s.textCor}>支持IPv6任务数</span>
				</div>
			</div>
			<div className={s.item}>
				<div className={s.countsr}>{info?.tasks_count - info?.tasks_ipv6_supported_count || 0}</div>
				<div className={s.label}>
					<SvgIcon active={4}></SvgIcon>
					<span className={s.textCor}>不支持IPv6任务数</span>
				</div>
			</div>
			{/* <div className={cn(s.monitorCounts)}>
				<div className={cn(s.item, s.pl20)}>
					<div>
						<svg
							width="56px"
							height="56px"
							viewBox="0 0 56 56"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							xmlnsXlink="http://www.w3.org/1999/xlink"
						>
							<g
								id="ipv6合规监测设计-0916"
								stroke="none"
								strokeWidth="1"
								fill="none"
								fillRule="evenodd"
							>
								<g
									id="按任务展示"
									transform="translate(-301.000000, -235.000000)"
								>
									<g id="编组-14" transform="translate(301.000000, 228.000000)">
										<g id="icon_05" transform="translate(0.000000, 7.000000)">
											<g
												id="icon-web漏洞"
												transform="translate(0.000000, 0.000000)"
											>
												<ellipse
													id="椭圆形"
													stroke="#0B6FD6"
													cx="28"
													cy="27.8380518"
													rx="27.5"
													ry="27.3380518"
												></ellipse>
												<g
													id="编组-2"
													transform="translate(13.391304, 14.524201)"
													fill="#D8D8D8"
													opacity="0"
													stroke="#979797"
												>
													<rect
														id="矩形"
														x="0.5"
														y="0.5"
														width="28.2173913"
														height="28.0484018"
													></rect>
												</g>
											</g>
											<g
												id="3.Icon/1.线性/2.业务安全类/系统监控"
												transform="translate(14.608696, 14.933333)"
												fill="#0B6FD6"
											>
												<path
													d="M24.3478261,0 C25.6925194,0 26.7826087,1.11431351 26.7826087,2.48888889 L26.7826087,16.1777778 C26.7826087,17.5523532 25.6925194,18.6666667 24.3478261,18.6666667 L14.6086957,18.6666667 L14.6086957,22.4 L24.5134387,22.4 L24.5134387,24.8888889 L2.60039527,24.8888889 L2.60039527,22.4 L12.173913,22.3987556 L12.173913,18.6666667 L2.43478261,18.6666667 C1.0900893,18.6666667 0,17.5523532 0,16.1777778 L0,2.48888889 C0,1.11431351 1.0900893,0 2.43478261,0 L24.3478261,0 Z M2.43478261,16.1777778 L24.3478261,16.1777778 L24.3478261,10.9448889 L10.8722287,10.9460368 L9.76610304,9.70161217 L6.45928068,13.3692049 L5.24047061,10.9460368 L2.43478261,10.9448889 L2.43478261,16.1777778 Z M24.3478261,2.48888889 L2.43478261,2.48888889 L2.43478261,8.456 L3.71687881,8.45714795 L5.60062188,5.35619549 L7.20662042,9.06907539 L9.62888272,6.16765476 L11.608436,8.45714795 L24.3478261,8.456 L24.3478261,2.48888889 Z"
													id="形状"
												></path>
											</g>
										</g>
									</g>
								</g>
							</g>
						</svg>
					</div>
					<div className={s.text}>
						<div className={cn(s.counts, s.tac, s.numCor)}>
							{info?.tasks_total_count || 0}
						</div>
						<div className={s.label}>
							<span className={cn(s.ml10, s.textCor, s.vam)}>检测任务数</span>
						</div>
					</div>
				</div>
				<Charts
					data={info?.tasks_ipv6_supported_count}
					total={info?.tasks_count}
				/>
			</div>
			<div className={cn(s.monitorCounts, s.ml10)}>
				<div className={cn(s.item, s.pl20)}>
					<div>
						<svg
							width="56px"
							height="56px"
							viewBox="0 0 56 56"
							version="1.1"
							xmlns="http://www.w3.org/2000/svg"
							xmlnsXlink="http://www.w3.org/1999/xlink"
						>
							<g
								id="ipv6合规监测设计-0916"
								stroke="none"
								strokeWidth="1"
								fill="none"
								fillRule="evenodd"
							>
								<g
									id="按任务展示"
									transform="translate(-877.000000, -233.000000)"
								>
									<g id="编组-12" transform="translate(878.000000, 228.000000)">
										<g id="Group-6" transform="translate(0.000000, 6.000000)">
											<circle
												id="Oval"
												strokeOpacity="0.495547421"
												stroke="#0B6FD6"
												fill="#FFFFFF"
												cx="27"
												cy="27"
												r="27"
											></circle>
											<g id="Group" transform="translate(14.850000, 14.850000)">
												<rect
													id="Rectangle"
													fill="#000000"
													opacity="0"
													x="0"
													y="0"
													width="23.8116746"
													height="23.8116746"
												></rect>
												<path
													d="M11.5843599,10.8904067 L0.364383546,6.07750746 C0.142544283,5.96715988 0.00228832764,5.74074407 0.00228832764,5.49297554 C0.00228832764,5.24520701 0.142544283,5.01879119 0.364383546,4.90844362 L11.6147253,0.125909694 C11.9490958,-0.0419794577 12.34314,-0.0419794577 12.6775106,0.125909694 L23.9126696,4.6807039 C24.1345089,4.79105147 24.2747648,5.01746729 24.2747648,5.26523583 C24.2747648,5.51300438 24.1345089,5.73942019 23.9126696,5.84976776 L12.7078758,10.8904067 C12.3520346,11.0576166 11.9402012,11.0576166 11.5843599,10.8904067 Z M24.1707746,18.1325295 C24.1707746,17.7384277 23.851292,17.418945 23.4571902,17.418945 C23.3717611,17.4045049 23.2845143,17.4045049 23.1990852,17.418945 L12.358675,22.2470269 C12.2282833,22.3054844 12.0791352,22.3054844 11.9487435,22.2470269 L1.10833325,17.6922327 L0.880593539,17.6922327 C0.537134917,17.6959978 0.245091243,17.9439143 0.185611669,18.2822044 C0.126132094,18.6204944 0.316095497,18.9531595 0.637671182,19.0738536 L11.3869855,23.6286478 C11.6384421,23.7481279 11.9132675,23.8103525 12.1916658,23.8108396 C12.449818,23.8193579 12.7058756,23.7618756 12.9356156,23.6438305 L23.7001126,18.9068445 C24.0178964,18.7895 24.2129201,18.4686545 24.1707746,18.1325295 L24.1707746,18.1325295 Z"
													id="Shape"
													fill="#0B6FD6"
													fillRule="nonzero"
												></path>
												<path
													d="M24.2922358,11.6799043 C24.2963191,11.4880332 24.2229446,11.3026053 24.0886764,11.1654803 C23.9544082,11.0283554 23.7705659,10.9511358 23.5786514,10.9511358 C23.4611426,10.9508888 23.3457452,10.9823608 23.2446331,11.0422332 L12.2675791,15.9462282 C12.1411926,15.9985263 11.9992167,15.9985263 11.8728302,15.9462282 L1.07796797,11.0574158 L0.986872088,11.0574158 C0.921360953,11.0488265 0.855008788,11.0488265 0.789497652,11.0574158 C0.464768937,11.0572655 0.180888053,11.2763813 0.0987740814,11.5905565 C0.0166601103,11.9047317 0.15702272,12.2347293 0.440296769,12.3934888 L11.3110723,17.3126665 C11.5625289,17.4321466 11.8373542,17.4943712 12.1157526,17.4948583 C12.3777607,17.493506 12.6365009,17.4365832 12.874885,17.3278492 L23.9278523,12.3934888 C24.1809046,12.2497256 24.3241585,11.9691866 24.2922358,11.6799043 L24.2922358,11.6799043 Z"
													id="Path"
													fill="#0B6FD6"
												></path>
											</g>
										</g>
									</g>
								</g>
							</g>
						</svg>
					</div>
					<div className={s.text}>
						<div className={cn(s.counts, s.tac, s.numCor)}>
							{info?.jobs_count}
						</div>
						<div className={s.label}>
							<span className={cn(s.ml10, s.textCor, s.vam)}>检测资产数</span>
						</div>
					</div>
				</div>
				<Charts2
					data={info?.jobs_ipv6_supported_count}
					total={info?.jobs_count}
				/>
			</div> */}
		</div>
	);
}
Stats.propTypes = {
	activeNum: PropTypes.any,
};
